<template>
  <view class='search_page'>
    <!-- 分类搜索 -->
    <!-- 已选分类 -->
    <view class='selected'>
      <view class='title'>已选分类</view>
      <view class='list'>
        <select-item></select-item>
      </view>
    </view>
    <!-- 目录 -->
    <view class='selected'>
      <view class='title'>目录</view>
      <scroll-view class='catalogue' :scroll-x='true'>
        <view class='catalogue_item' :class='{on: index == 1}' v-for='(item,index) in 11' :key='index'>
            湖州卫健委
        </view>
      </scroll-view>
      <view class='list'>
        <select-item :type='2'></select-item>
      </view>
    </view>
  </view>
</template>

<script>

  export default {
    // 导航栏搜索
    onNavigationBarSearchInputConfirmed() {
      uni.navigateTo({
        url: '../search/searchRes'
      });
    },
    onReady() {

    }
  }
</script>

<style lang="scss" scoped>
.search_page {
  width: 100%;
  .selected {
    width: 100%;
    padding: 22upx 0;
    box-sizing: border-box;
    font-weight: 600;
    .title {
      font-size: 34upx;
      color: #333;
      padding: 0 22upx;
      box-sizing: border-box;
    }
    .catalogue{
      width: 100%;
      height: 88upx;
      background: #fff;
       white-space: nowrap;
       margin-top: 30upx;
      .catalogue_item {
        padding: 0 25upx;
        box-sizing: border-box;
        height: 88upx;
        line-height: 88upx;
        display: inline-block;
        font-size: 28upx;
        color: #666;
        position: relative;
      }
      .on {
        color: #0084FF;
        &::before {
          content: "";
          width:60upx;
          height:6upx;
          background:rgba(0,132,255,1);
          border-radius:3upx;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
      }
    }
    .list {
      padding: 30upx 22upx 0;
      box-sizing: border-box;
    }
  }
}
</style>